/*
    Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved.
    Licensed under the MIT License.
    contact:dcdev_founder@foxmail.com
*/

function create_layui_table(data) {
  var iframeHtml = $(`#preview_iframe_table_show`).get(0);
  var all_html =`
    <link type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" />
    <script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"><\/script>
    <table class="layui-hide" id="test"></table>
    <script>
      layui.use('table', function () {
      var table = layui.table;
      table.render({
        elem: '#test'
        , url: './json.js'
        , parseData: function (res) { //res 即为原始返回的数据
          return {
            "code": res.status, //解析接口状态
            "msg": res.message, //解析提示文本
            "count": res.total, //解析数据长度
            "data": res.data.item //解析数据列表
          };
        }
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
          { field: 'type', width: 80, title: '类型', sort: true }
          , { field: 'title', width: 80, title: '名称' }
          , { field: 'column_name', width: 80, title: '组件名' }
          , { field: 'is_require', title: '必填', width: '10%', minWidth: 100 } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
          , { field: 'default_value', title: '初始值', sort: true }
          , { field: 'options', title: '项', sort: true }
          , { field: 'options_title', title: '项名', sort: true }
          , { field: 'place_holder', title: '文字提示', sort: true }
          , { field: 'max_value', title: '最大长度' }
          , { field: 'min_value', width: 137, title: '最小长度', sort: true }
          , { field: 'hidden', width: 137, title: '是否隐藏' }

        ]]
      });
    });

    layui.use('upload', function(){
        var $ = layui.jquery,
        upload = layui.upload;
        ${upload_render}
      
    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        ${date_render}
    });

    layui.use('form', function(){
        var form = layui.form,
        $=layui.jquery;
        //监听提交
        form.on('submit(submit_form)', function(data){
          console.log(JSON.stringify(data.field));
          layer.msg(JSON.stringify(data.field));
          return false;
        }); 
    });

    <\/script>
  `
  iframeHtml.contentWindow.document.write(all_html); // 动态写入返回页面到iframe
  iframeHtml.contentWindow.document.close();
  
}



function create_layui_table_toolbar(array, outter_class = "", outter_style = "") {
  var iframeHtml = $(`#${array['id']}`).get(0);
 
  var all_html =`

    <link type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" />
    <script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"><\/script>
    <script src="./render_input_form.js"></script>
    <div class="${array['outter_class']}" style="${array['outter_style']}">
      <table class="layui-hide" id="test" lay-filter="test" style="position:relative"></table>
      <div class="showform"></div>
    </div>
    <!-- 表格的侧边工具 -->
    <script type="text/html" id="barDemo">
    ${Boolean(array['is_editable'])?
    `<a class="layui-icon layui-icon-edit" lay-event="edit" style="font-size: 28px;"></a>`:''}
    ${Boolean(array['is_deletable'])?
      `<a class="layui-icon layui-icon-close-fill" lay-event="del" style="font-size: 28px;color: red;margin-left: 10px"></a>`:''}
    <\/script>
     <script>
        layui.use(['table','form'], function () {
    var table = layui.table;
    var form = layui.form;
    table.render({
      elem: '#test'
      , url: './json.js'
      , parseData: function (res) { //res 即为原始返回的数据
        return {
          "code": res.status, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data.item //解析数据列表
        };
      }

      , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      , cols: [[
        { field: 'type', width: 80, title: '类型', sort: true }
        , { field: 'title', width: 80, title: '名称',edit: 'text'}
        , { field: 'column_name', width: 80, title: '组件名' }
        , { field: 'is_require', title: '必填', width: '10%', minWidth: 100 } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
        , { field: 'default_value', title: '初始值', sort: true,edit: 'text'}
        , { field: 'options', title: '项', sort: true,edit: 'text'}
        , { field: 'options_title', title: '项名', sort: true }
        , { field: 'place_holder', title: '文字提示', sort: true,edit: 'text'}
        , { field: 'max_value', title: '最大长度',edit: 'text'}
        , { field: 'min_value', width: 137, title: '最小长度', sort: true}
        , { field: 'hidden', width: 137, title: '是否隐藏',edit: 'text'}
        , { field: 'is_horizontal', width: 137, title: '是否横向排列',edit: 'text'}
        , { fixed: 'right', title: '操作', toolbar: '#barDemo',width:100}
      ]]
      ,page: Boolean(${array['is_pagination']})
      ,limit: ${array['limit']} //每页默认显示的数量
    });
    //监听行工具事件
    table.on('tool(test)', function (obj) {
      var data = obj.data;
      //console.log(obj)
      if (obj.event === 'del') {
        layer.confirm('确定要删除此数据？', function (index) {
          obj.del();
          layer.close(index);
        });
      } else if (obj.event === 'edit') {
        var html = create_layui_input_form([data], "", "margin:10px;");
        console.log(data)
        $('.showform').html(html)
        form.render();
     
        

      }
    });

  });
  layui.use('upload', function(){
        var $ = layui.jquery,
        upload = layui.upload;
        ${upload_render}
      
    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        ${date_render}
    });

    layui.use('form', function(){
        var form = layui.form,
        $=layui.jquery;
        //监听提交
        form.on('submit(submit_form)', function(data){
          console.log(JSON.stringify(data.field));
          layer.msg(JSON.stringify(data.field));
          return false;
        }); 
  });


    <\/script>

  `


  iframeHtml.contentWindow.document.write(all_html); // 动态写入返回页面到iframe
  iframeHtml.contentWindow.document.close();


}

var data = {
  id: "preview_iframe_table_show",
  // 用于渲染的数据
  data: array,
  // 是否分页
  is_pagination: 1,
  //每页显示行数
  limit:5,
  // 是否添加修改、删除按钮
  is_editable: 1,
  is_deletable: 1,
  outter_class: "",
  outter_style: ""
}
create_layui_table_toolbar(data);